<template>
    <view class="editor-content">
        <view class="content" v-for="item in list" :key="item.id">
            <view class="content-item" @click="handleClick(item)">
                <text class="title">{{ item.title }}</text>
                <text class="user-info">{{
                    userData[item.key] || item.placeholder
                }}</text>
                <han-icon name="advance" class="icon" />
            </view>
        </view>
    </view>
</template>

<script setup>
import { ref, onMounted, computed } from 'vue';
import { USER_PROFILE_EDITOR } from '@/util/config/profileEditor.config.js';
import { useUserStore } from '@/stores/userStores';
import { updateGenderAPI } from '@/apis/userAPI';

const list = ref(USER_PROFILE_EDITOR);
const userStore = useUserStore();

// 使用计算属性获取用户数据
const userData = computed(() => userStore.currentUser);

onMounted(async () => {
    await userStore.init();
    userData.value = userStore.currentUser;
});

const handleClick = (item) => {
    switch (item.key) {
        case 'gender':
            // 性别项：弹出选择框
            uni.showActionSheet({
                itemList: ['男', '女', '保密'],
                success: async (res) => {
                    const selectedGender = ['男', '女', '保密'][res.tapIndex];
                    try {
                        // 调用更新性别接口
                        const res = await updateGenderAPI({
                            userId: userStore.currentUser.userId,
                            gender: selectedGender
                        });

                        if (res.data.success) {
                            // 更新本地数据
                            userStore.currentUser.gender = selectedGender;
                            uni.showToast({
                                title: '性别更新成功',
                                icon: 'none'
                            });
                        } else {
                            uni.showToast({
                                title: '性别更新失败',
                                icon: 'none'
                            });
                        }
                    } catch (error) {
                        uni.showToast({ title: '更新失败', icon: 'none' });
                    }
                }
            });

            break;
        case 'username':
            uni.navigateTo({
                url: `/pages/user/subpages/profile_editor/subpages/edit_field/editField?field=username`
            });

            break;
        case 'bio':
            uni.navigateTo({
                url: `/pages/user/subpages/profile_editor/subpages/edit_field/editField?field=bio`
            });

            break;
        case 'location':
            uni.navigateTo({
                url: `/pages/map/subpages/region_picker/regionPicker`
            });
            break;
    }
};
</script>

<style lang="scss">
.editor-content {
    padding-top: 50rpx;

    .content {
        padding: 0 20rpx;

        .content-item {
            display: flex;
            align-items: center;
            padding: 20rpx 0;
            border-bottom: 1rpx solid $han-global-border-color;

            .title {
                width: 25%;
                color: $han-global-secondary-font-color;
                font-size: $han-font-size-base;
            }

            .user-info {
                width: 65%;
                font-size: $han-font-size-base;
            }

            .icon {
                width: 10%;
                margin-left: auto;
            }
        }
    }
}
</style>
